<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>foreach循环操作的使用</title>
</head>
<style>
    .show{
        color: #ccc;
    }
</style>
<body>
    <ul>
        <li>Vue.js</li>
        <li>Node.js</li>
        <li>JS</li>
    </ul>
</body>
<script>
    let lessones = [
        {name:'Vue.js',price:200},
        {name:'Node.js',price:1800},
        {name:'js',price:150},
    ]

    /*
        数组的foreach方法也是循环数组成员的操作，
            它可以传递一个回调函数，  回调函数接收三个参数
                第一个是遍历的元素，  第二个是遍历的元素在数组中的索引   第三个是原数组
    */
    lessones.forEach((item,index,arr)=>{
        console.log(item)
        console.log(index)
        console.log(arr)
    })

    /*
        foreach方法也可以直接用来操作Dom元素
    */
    let arr = document.querySelectorAll('ul>li')
    // arr = [...arr]
    console.log([...arr])
    arr.forEach(item=>{
        item.addEventListener('click',()=>{
            item.classList.toggle('show')  //toggle 是开关，  这点在jQuery中特别常见
        })
    })
</script>
</html>